<template>
  <div>
    <h2>自定义指令</h2>
    <!-- 需求将字符串'hanhan'变为大写 -->
    <h1>{{ msg }}</h1>
    <h1>{{ msg.toUpperCase() }}</h1>
    <button @click="changeBig">变为大写</button>
    <!-- 用指令完成该效果 -->
    <h2 v-uc="msg"></h2>
    <h1 v-uc="info"></h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hanhan",
      info: "lele very happy!!",
    };
  },
  methods: {
    changeBig() {
      this.msg = this.msg.toUpperCase();
    },
  },
  //   局部指令
  directives: {
    uc: {
      // 当标签上有v-uc触发bind函数
      bind(el, binding) {
        /* 
          el 是使用指令的HTML元素
          binding 
          binding name指令的名字  value当前指令绑定值

          */
        console.log(el, binding);
        el.innerText = binding.value.toUpperCase();
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>